<template>
  <div style="height: 100%;background-color: #01001C;">
    <div class="conten">
      <el-row>
        <el-col :span="24"><img class="video" src="../../assets/imgs/dy.png"><p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 43px;">空调温度控制</p></el-col>
        <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
      </el-row>
      <el-row>
        <!-- <hr style="height: 1px;border: none;border-top:2px dotted rgb(21,46,100);"> -->
        <div class="camera5">
          <p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 13px;">环境温度</p>
          <div style="float: right;margin: 0 30px;font-size: 12px;height: 40px;line-height: 40px">
            {{ temperature }}℃
          </div>
        </div>
      </el-row>
      <el-row style="margin-top: 30px;">
        <el-col span="9" style="text-align: center">
          <el-button type="danger" circle class="on-off-button" @click="openController">开</el-button>
        </el-col>
        <el-col span="6" style="text-align: center">
          <div style="color: white">
            <div v-if="aircontrollerStatus.onOff=='ON'" class="status-line-box">
              状态：开
            </div>
            <div v-else class="status-line-box">
              状态：关
            </div>
          </div>
        </el-col>
        <el-col span="9" style="text-align: center">
          <el-button circle class="on-off-button" @click="closeController()">关</el-button>
        </el-col>
      </el-row>

      <el-row style="margin-top: 30px;">
        <el-col span="9" style="text-align: center">
          <el-button type="primary" @click="incTemperature"><i class="el-icon-arrow-left el-icon--left" />升温</el-button> </el-col>
        <el-col span="6" style="text-align: center">
          <div class="status-line-box" style="color: white">温度：{{ aircontrollerStatus.temperature }}℃</div>
        </el-col>
        <el-col span="9" style="text-align: center">
          <el-button type="primary" @click="decTemperature">降温<i class="el-icon-arrow-right el-icon--right" /></el-button> </el-col>
      </el-row>

      <el-row style="margin-top: 30px;">
        <el-col span="9" style="text-align: center">
          <el-button type="primary" @click="setColdMode"><i class="el-icon-arrow-left el-icon--left" />制冷</el-button> </el-col>
        <el-col span="6" style="text-align: center">
          <div v-if="aircontrollerStatus.workMode=='1'" class="status-line-box" style="color: white">模式：制冷</div>
          <div v-if="aircontrollerStatus.workMode=='2'" class="status-line-box" style="color: white">模式：制热</div>
        </el-col>
        <el-col span="9" style="text-align: center">
          <el-button type="primary" @click="setHeatMode">制热<i class="el-icon-arrow-right el-icon--right" /></el-button> </el-col>
      </el-row>

      <el-row style="margin-top: 30px;">
        <el-col span="9" style="text-align: center">
          <el-button type="primary" @click="incWindSpeed"><i class="el-icon-arrow-left el-icon--left" />增加</el-button> </el-col>
        <el-col span="6" style="text-align: center">
          <div v-if="aircontrollerStatus.windSpeed=='2'" class="status-line-box" style="color: white">风量：中风</div>
          <div v-if="aircontrollerStatus.windSpeed=='1'" class="status-line-box" style="color: white">风量：低风</div>
          <div v-if="aircontrollerStatus.windSpeed=='3'" class="status-line-box" style="color: white">风量：高风</div>
          <div v-if="aircontrollerStatus.windSpeed=='4'" class="status-line-box" style="color: white">风量：强风</div>
        </el-col>
        <el-col span="9" style="text-align: center">
          <el-button type="primary" @click="decWindSpeed">减少<i class="el-icon-arrow-right el-icon--right" /></el-button> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAllTribunalEquipmentListByType, sendEquipmentCommand } from '@/api/tribunalEquipment'
import { controlAirCondition, getTemperature } from '@/api/aircondition'
export default {
  name: '',
  props: {
    tribunal3: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      week: null,
      isShow: false,
      temperature: 25,
      times: null,
      times2: null,
      aircontroller: {},
      aircontrollerStatus: {
        onOff: 'OFF',
        workMode: 1,
        windSpeed: 2,
        temperature: 26
      },
      temperatureSenser: {},
      TribunalOptions: [],
      courtCode: null,
      tribunalCode: this.tribunal
    }
  },
  watch: {
    tribunal3(newvalue) {
      this.tribunalCode = newvalue
      if (this.tribunalCode != null) {
        const aircontrollerType = 9
        this.getTribunalEquipmentByType(aircontrollerType)
        const temperatureSenserType = 10
        this.getTribunalEquipmentByType(temperatureSenserType)
      }
    }
  },
  created() {
  },
  mounted() {
    const that = this
    setInterval(function() {
      console.log('get room temperature')
      if (that.temperatureSenser != null) {
        that.getRoomTemperature()
      }
    }, 3000 * 100)
  },
  methods: {
    decTemperature() {
      let temperature = this.aircontrollerStatus.temperature
      if (temperature <= 17) {
        temperature = 17
        this.aircontrollerStatus.temperature = temperature
      } else {
        temperature = temperature - 1
        this.aircontrollerStatus.temperature = temperature
      }
      this.sendAirConditionCmd()
    },
    openController() {
      this.aircontrollerStatus.onOff = 'ON'
      this.sendAirConditionCmd()
    },
    closeController() {
      this.aircontrollerStatus.onOff = 'OFF'
      this.sendAirConditionCmd()
    },
    incTemperature() {
      let temperature = this.aircontrollerStatus.temperature
      if (temperature < 30) {
        temperature = temperature + 1
        this.aircontrollerStatus.temperature = temperature
      }
      this.sendAirConditionCmd()
    },
    setColdMode() {
      this.aircontrollerStatus.workMode = 1
      this.sendAirConditionCmd()
    },
    setHeatMode() {
      this.aircontrollerStatus.workMode = 2
      this.sendAirConditionCmd()
    },
    incWindSpeed() {
      let windSpeed = this.aircontrollerStatus.windSpeed
      if (windSpeed < 4) {
        windSpeed = windSpeed + 1
      }
      this.aircontrollerStatus.windSpeed = windSpeed
      this.sendAirConditionCmd()
    },
    decWindSpeed() {
      let windSpeed = this.aircontrollerStatus.windSpeed
      if (windSpeed > 1) {
        windSpeed = windSpeed - 1
      }
      this.aircontrollerStatus.windSpeed = windSpeed
      this.sendAirConditionCmd()
    },
    sendAirConditionCmd() {
      console.log('发送控制命令')
      console.log(this.aircontrollerStatus)
      const param = {
        controllerId: this.aircontroller.id,
        temperature: this.aircontrollerStatus.temperature,
        onOff: this.aircontrollerStatus.onOff,
        workMode: this.aircontrollerStatus.workMode,
        windSpeed: this.aircontrollerStatus.windSpeed
      }
      controlAirCondition(param).then(res => {
        this.$message.info('指令已下发')
      })
    },
    getTribunalEquipmentByType(equipmentType) {
      const param = {
        typeId: equipmentType,
        tribunalCode: this.tribunal
      }
      getAllTribunalEquipmentListByType(param).then(res => {
        console.log(res)
        const list = res.data
        let equipment = null
        if (list != null && list.length > 0) {
          equipment = list[0]
        }
        if (equipmentType === 9) {
          this.aircontroller = equipment
        } else if (equipmentType === 10) {
          this.temperatureSenser = equipment
          this.getRoomTemperature()
        }
      })
    },
    getRoomTemperature() {
      const param = {
        id: this.temperatureSenser.id
      }
      getTemperature(param).then(res => {
        console.log(res)
        if (res && res.success) {
          const data = res.data
          const temperature = data['1']
          this.temperature = temperature
        }
      })
    },
    getAllTribunalEquipmentListByType() {
      getAllTribunalEquipmentListByType(this.iot).then(response => {
        this.iotList = response.data
      })
    },
    sendCommand(val, type) {
      val.operation = type
      sendEquipmentCommand(val).then(response => {
        this.$message({
          message: '发送成功',
          type: 'success'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.conten{
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 30px #2243B2 inset
}
.status-line-box{
  height: 40px;
  line-height: 40px;
}
.video{
  width: 16px;
  height: 16px;
  position: absolute;
  margin: 10px 20px;
}
.camera {
  width: 130px;
  height: 64px;
  font-size: 5px;
  color: #FFFFFF;
  float: left;
  margin-top: 5px;
  margin-left: 15px;
  border-radius: 5px;
  background-image: linear-gradient(to top,#01001C,#1D399B);
}
.camera5 {
  width: 100%;
  height: 54px;
  text-align: center;
  font-size: 4px;
  color: #FFFFFF;
  float: left;
  // margin-left: 15px;
  border-radius: 5px;
  border: 1px dotted rgb(21,46,100);
  // background-image: linear-gradient(to top,#1D399B,#01001C);
}
</style>
